<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>role</title>
    <script src="../../plugins/jquery.1.12.4.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-3.3.0/css/bootstrap.min.css">
    <script src="../../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css">
    <script src="../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <link href="../../plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <script src="../../plugins/waves-0.7.5/waves.min.js"></script>
    <script src="../../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="../../plugins/jquery-confirm/jquery-confirm.min.css">
    <script src="../../plugins/jquery-confirm/jquery-confirm.min.js"></script>
    <link rel="stylesheet" href="../../css/metroStyle/metroStyle.css" type="text/css">
    <link rel="stylesheet" href="../../plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
    <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.exedit.js"></script>

    <script src="../../js/common.js"></script>
    <style>
        #main{padding:1% 2% 2%;background-color:#f5f5f5;}
        .form-group{padding: 10px 20px 0 20px}
    </style>
</head>
<body>
<div id="main" >
    <div id="toolbar" class="btn-group">
        <shiro:hasPermission name="role:add">
            <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal" >
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增角色
            </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="role:update">
            <button id="btn_edit" type="button" class="btn btn-default" onclick="updateAction()" >
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑角色
            </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="role:allocation">
            <button id="btn_permission" type="button" class="btn btn-default" onclick="permissionAction()">
                <span class="glyphicon glyphicon-check" aria-hidden="true"></span>角色权限
            </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="role:dalete">
            <button id="btn_delete" type="button" class="btn btn-default" onclick="deleteAction()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除角色
            </button>
        </shiro:hasPermission>
        
    </div>
    <!-- 新增模态框（Modal）-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" >
                        <strong>新增角色</strong>
                    </h4>
                </div>
                <div class="form-group" >
                    <label for="addName">名称</label>
                    <input id="addName" type="text" class="form-control" name="addName" maxlength="20">
                </div>
                <div class="form-group">
                    <label for="addTitle">标题</label>
                    <input id="addTitle" type="text" class="form-control" name="addTitle" maxlength="20">
                </div>
                <div class="form-group">
                    <label for="addDescription">描述</label>
                    <input id="addDescription" type="text" class="form-control" name="addDescription" maxlength="300">
                </div>
                <div class="form-group">
                    <label >状态</label>
                    <div class="radio">
                        <div class="radio radio-inline radio-success">
                            <input id="addStatus_0" type="radio" name="addStatus" value="0" checked>
                            <label for="addStatus_0">正常 </label>
                        </div>
                        <div class="radio radio-inline">
                            <input id="addStatus_1" type="radio" name="addStatus" value="1">
                            <label for="addStatus_1">锁定 </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button id="createRole" type="button" class="btn btn-primary">
                        确定新增
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 编辑模态框（Modal）-->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" >
                        <strong>编辑角色</strong>
                    </h4>
                </div>
                <div class="modal-body">
                    <label id="updateId" value="" style="display:none"></label>
                    <div class="form-group" >
                        <label for="updateName">名称</label>
                        <input id="updateName" type="text" class="form-control" name="updateName" maxlength="20" value="">
                    </div>
                    <div class="form-group">
                        <label for="updateTitle">标题</label>
                        <input id="updateTitle" type="text" class="form-control" name="updateTitle" maxlength="20" value="">
                    </div>
                    <div class="form-group">
                        <label for="updateDescription">描述</label>
                        <input id="updateDescription" type="text" class="form-control" name="updateDescription" maxlength="300" value="">
                    </div>
                    <div class="form-group">
                        <label for="addDescription">状态</label>
                        <div class="radio">
                            <div class="radio radio-inline radio-success">
                                <input id="updateStatus_0" type="radio" name="updateStatus" value="0">
                                <label for="updateStatus_0">正常 </label>
                            </div>
                            <div class="radio radio-inline">
                                <input id="updateStatus_1" type="radio" name="updateStatus" value="1">
                                <label for="updateStatus_1">锁定 </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button id="updateRole" type="button" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!--权限弹框-->
    <div class="modal fade bs-example-modal-sm" id="permissionModal" tabindex="-1" role="dialog" aria-labelledby="permissionLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="permissionLabel">分配资源权限</h4>
                </div>
                <div class="modal-body">
                    <form id="boxRoleForm">
                        <div class="zTreeDemoBackground left">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"> 关闭</i></button>
                    <button id="updatePermission" type="button" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div>
        </div>
    </div>

    <table id="table" style="font-size: 14px;"></table>
</div>

<script>
    var $table = $('#table');
    $('#table').bootstrapTable({
        url: '${basePath}/role/list',
        height:getHeight(),
        striped: true, // 是否显示行间隔色
        search: true,
        showRefresh: true,
        showColumns: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        // detailView: true,
        paginationLoop: false,
        sidePagination: 'server',
        silentSort: false,
        smartDisplay: false,
        escape: true,
        searchOnEnterKey: true,
        detailFormatter: 'detailFormatter',
        toolbar: "#toolbar",
        uniqueId: "ID",
        pageSize: "10",
        pagination: true, // 是否分页
        sortable: true, // 是否启用排序
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        columns: [
            {field: 'ck', checkbox: true,width:70},
            {field: 'id',title: '编号',align:'center'},
            {field: 'name',title: '名称',align:'center'},
            {field: 'title',title: '标题',align: 'center'},
            {field: 'description',title: '描述',align: 'center'},
            {field: 'available',title: '是否锁定',align: 'center',formatter: statusFormatter},
            {field: 'operation',title: '操作',width:200,align: 'center',valign: 'middle',formatter: actionFormatter, clickToSelect: false},
        ]
    });
    //状态的格式化
    function statusFormatter(value, row, index) {
        if(value == 1){
            return '锁定';
        }else{
            return '正常';
        }
    }

    //操作栏的格式化
    function actionFormatter(value, row, index) {
        return [
            '<a href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-primary btn-update" style="background-color: grey;"><i class="glyphicon glyphicon-edit"></i>编辑</a>',
            '&nbsp; <a href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove" class="btn btn-xs btn-danger btn-remove"  style="background-color: black;"><i class="glyphicon glyphicon-remove"></i>删除</a>'
            // '<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
            // '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }

    $(function () {
        $("#createRole").click(function () {
            var addName = $("#addName").val();
            var addTitle = $("#addTitle").val();
            var addDescription = $("#addDescription").val();
            var addStatus = $('input:radio[name="addStatus"]:checked').val();
            var role = {name:addName,title:addTitle,description:addDescription,available:addStatus}
            $.ajax({
                url:'${basePath}/role/create',
                type:"post",
                dataType:'json',
                data:role,
                success:function (result) {
                    if (result.result == "success"){
                        $('#addModal').modal('hide');
                        $("#table").bootstrapTable('refresh');
                    }else{
                        alert("fail");
                    }
                }
            })
        })
    })

    // 编辑
    function updateAction() {
        var row = $table.bootstrapTable('getSelections');
        if (row.length != 1) {
            $.confirm({
                type: 'blue',
                title: false,
                content: '请选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            $("#updateName").val(row[0].name);
            $("#updateTitle").val(row[0].title);
            $("#updateDescription").val(row[0].description);
            var  updateAvailable = row[0].available;
            if(updateAvailable == 0){
                $("#updateStatus_0").prop("checked", true);
            }else if(updateAvailable == 1){
                $('#updateStatus_1').prop("checked", true);
            }
            $('#updateModal').modal('show');

            $("#updateRole").off("click").on("click",function(){
                var updateId = row[0].id;
                var updateName = $("#updateName").val();
                var updateTitle = $("#updateTitle").val();
                var updateDescription = $("#updateDescription").val();
                var updateAvailable = $('input:radio[name="updateStatus"]:checked').val();
                var role = {id:updateId,name:updateName,title:updateTitle,description:updateDescription,available:updateAvailable}
                $.ajax({
                    url:'${basePath}/role/update',
                    type:"post",
                    dataType:'json',
                    data:role,
                    success:function (result) {
                        if (result.result == "success"){
                            $('#updateModal').modal('hide');
                            $("#table").bootstrapTable('refresh');
                        }else{
                            alert("fail");
                        }
                    }
                })
            })
        }
    }

    // 删除
    var deleteDialog;
    function deleteAction() {
        var row = $table.bootstrapTable('getSelections');
        if (row.length == 0) {
            $.confirm({
                type: 'blue',
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            deleteDialog = $.confirm({
                type: 'red',
                animationSpeed: 300,
                title: false,
                content: '确认删除该角色吗？',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button',
                        action: function () {
                            var ids = new Array();
                            for (var i in row) {
                                ids.push(row[i].id);
                            }
                            $.ajax({
                                type: 'get',
                                url: '${basePath}/role/delete/' + ids,
                                success: function(result) {
                                    if (result.result != 'success') {
                                        $.confirm({
                                            theme: 'dark',
                                            animation: 'rotateX',
                                            closeAnimation: 'rotateX',
                                            title: false,
                                            content: '删除失败',
                                            buttons: {
                                                confirm: {
                                                    text: '确认',
                                                    btnClass: 'waves-effect waves-button waves-light'
                                                }
                                            }
                                        });
                                    } else {
                                        $.confirm({
                                            theme: 'dark',
                                            animation: 'rotateX',
                                            closeAnimation: 'rotateX',
                                            title: false,
                                            content: '删除成功',
                                            buttons: {
                                                confirm: {
                                                    text: '确认',
                                                    btnClass: 'waves-effect waves-button waves-light'
                                                }
                                            }
                                        });
                                        $('#table').bootstrapTable('refresh');
                                    }
                                },
                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                    $.confirm({
                                        theme: 'dark',
                                        animation: 'rotateX',
                                        closeAnimation: 'rotateX',
                                        title: false,
                                        content: textStatus,
                                        buttons: {
                                            confirm: {
                                                text: '确认',
                                                btnClass: 'waves-effect waves-button waves-light'
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        }
    }

    // 角色权限
    function permissionAction() {
        var row = $table.bootstrapTable('getSelections');
        if (row.length != 1) {
            $.confirm({
                type: 'blue',
                title: false,
                content: '请选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            var setting = {
                view: {
                    selectedMulti: false
                },
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
            };
            
            var zNodes;
            $.ajax({
                type:'get',
                url:'${basePath}/role/getPermission?roleId='+row[0].id,
                dataType:'json',
                success:function (data) {
                    zNodes = data.result;
                    var tree =  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                }
            })

            $('#permissionModal').modal('show');

            $("#updatePermission").off("click").on("click",function(){
                var zTreeOjb = $.fn.zTree.getZTreeObj("treeDemo");  //ztree的Id  zTreeId
                var checkedNodes = zTreeOjb.getCheckedNodes(true);
                var ids = new Array();
                for(var i=0;i<checkedNodes.length;i++) {
                    ids.push(checkedNodes[i].id);
                };
                
                $.ajax({
                    url:'${basePath}/role/uptRolePermission?roleId='+row[0].id+'&ids='+ids,
                    type:"get",
                    dataType:'json',
                    success:function (result) {
                        if (result.result == "success"){
                            $('#permissionModal').modal('hide');
                            $("#table").bootstrapTable('refresh');
                        }else{
                            alert("fail");
                        }
                    }
                })
            })
        }
    }
</script>
</body>

</html>